<template>
  <scroll-view
    scroll-y
    enable-flex
    class="video_main"
    @scrolltolower="handleScrolltolower"
  >
    <view
      class="video_item"
      v-for="item in videowp"
      :key="item.id"
      @click="goVideo(item)"
    >
      <img :src="item.img" alt="" mode="widthFix" />
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      videowp: [],
      hasMore: true
    };
  },
  props: {
    urlobj: Object
  },
  watch: {
    urlobj() {
      //console.log(this.urlobj);
      this.videowp = [];
      this.getList();
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await this.request(this.urlobj.url, this.urlobj.params);
      if (res.code === 0) {
        if (res.res.videowp.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多数据了",
            icon: "none"
          });
          return;
        }

        this.videowp = [...this.videowp, ...res.res.videowp];
      }
    },
    handleScrolltolower() {
      if (this.hasMore) {
        this.urlobj.params.skip += this.urlobj.params.limit;

        this.getList();
      } else {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none"
        });
      }
    },
    goVideo(item) {

      /**
       * 将数据存到全局共享中
       */
      getApp().globalData.video=item
      uni.navigateTo({
        url:'/pages/videoPlay/index'
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.video_main {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
  .video_item {
    flex: 33.33333%;
    border: 5rpx solid #fff;
  }
}
</style>
